<template>
  <!-- 资产库详情 -->
  <div class="assetArchiveDetailsPage">
    <CommonTitle titleName="基本信息"></CommonTitle>
    <div class="inpuBox">
      <el-form
        :inline="true"
        :model="baseForm"
        class="demo-form-inline"
        label-position="right"
        label-width="110px"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item style="width: 100%" label="资产名称">
              <span class="itemContentBox">{{ baseForm.assetsName }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item style="width: 100%" label="资产位置">
              <span class="itemContentBox">高新区</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item style="width: 100%" label="资产状态">
              <span class="itemContentBox">{{
                baseForm.status == 1
                  ? "在用"
                  : baseForm.status == -1
                  ? "停用"
                  : baseForm.status == 0
                  ? "闲置"
                  : baseForm.status
              }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item style="width: 100%" label="资产权属">
              <span class="itemContentBox">{{ baseForm.assetsOwner }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item style="width: 100%" label="资产类型">
              <span class="itemContentBox">{{ baseForm.typeName }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item style="width: 100%" label="取得方式">
              <span class="itemContentBox">{{ baseForm.sourceTypeName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item style="width: 100%" label="取得日期">
              <span class="itemContentBox">{{ baseForm.sourceTime }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item style="width: 100%" label="处置日期">
              <span class="itemContentBox">{{ baseForm.manageTime }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item style="width: 100%" label="资产价值">
              <span class="itemContentBox">{{ baseForm.assetsWorth }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item style="width: 100%" label="责任部门">
              <span class="itemContentBox">{{ getUserDepartment }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item style="width: 100%" label="物业单位">
              <span class="itemContentBox">{{
                baseForm.propertyCompanyName
              }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item style="width: 100%" label="资产建筑面积">
              <span class="itemContentBox">{{ baseForm.buildArea }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item style="width: 100%" label="停车场面积">
              <span class="itemContentBox">{{ baseForm.parkingArea }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item style="width: 100%" label="可租赁面积">
              <span class="itemContentBox">{{ baseForm.leaseAbleArea }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item style="width: 100%" label="移交面积">
              <span class="itemContentBox">{{ baseForm.handoverArea }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item style="width: 100%" label="自用面积">
              <span class="itemContentBox">{{ baseForm.selfUseArea }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item style="width: 100%" label="可用面积">
              <span class="itemContentBox">{{ baseForm.usableArea }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <CommonTitle titleName="租赁信息" />
    <div class="inpuBox">
      <el-form
        :inline="true"
        :model="baseForm"
        class="demo-form-inline"
        label-position="right"
        label-width="100px"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item style="width: 100%" label="已租面积">
              <span class="itemContentBox">{{ baseForm.leasedArea }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item style="width: 100%" label="闲置面积">
              <span class="itemContentBox">{{ baseForm.leaseUnusedArea }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item style="width: 100%" label="出租率">
              <span class="itemContentBox">{{ baseForm.leaseRate }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <CommonTitle titleName="相关文件" />
    <div class="inpuBox">
      <el-form
        :inline="true"
        :model="baseForm"
        class="demo-form-inline"
        label-position="right"
        label-width="100px"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item
              class="noBgBox"
              style="width: 100%"
              label="资产实景图:"
            >
              <template v-if="state.imgArr.length">
                <el-image
                  v-for="(n, i) in state.imgArr"
                  :key="i"
                  style="width: 100px; height: 100px; margin-right: 20px"
                  :src="n.fileAddress"
                  :zoom-rate="1.2"
                  :preview-src-list="state.picSrcListArr"
                  :initial-index="4"
                  fit="cover"
                  @click="switchImg(n.fileAddress)"
                />
              </template>
              <template v-else>
                <div class="m-t5">无</div>
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider border-style="dashed" />
        <el-row>
          <el-col :span="24">
            <el-form-item
              class="noBgBox docBox"
              style="width: 100%"
              label="其他文件:"
            >
              <div
                v-if="state.docFileArr.length"
                class="m-t50"
                style="width: 100%"
              >
                <el-row :gutter="10" style="width: 100%">
                  <el-col
                    :span="5"
                    v-for="(n, i) in state.docFileArr"
                    :key="i"
                  >
                    <div class="docNameBox">{{ i + 1 }}.{{ n.fileName }}</div>
                    <div
                      class="downLoadBtn"
                      @click="downloadFile(n.fileAddress, n.fileName)"
                    >
                      <img
                        style="vertical-align: middle; margin-bottom: 3px"
                        src="@/assets/iconImg/download.png"
                        alt=""
                      />
                      下载
                    </div>
                  </el-col>
                </el-row>
              </div>
              <div v-else class="m-t5">无</div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <CommonTitle titleName="建档信息"></CommonTitle>
    <div class="inpuBox">
      <el-form
        :inline="true"
        :model="baseForm"
        class="demo-form-inline"
        label-position="right"
        label-width="100px"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item style="width: 100%" label="建档时间">
              <span class="itemContentBox">{{ baseForm.createTime }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import CommonTitle from "@/components/CommonTitle.vue";
import { ref, reactive, onMounted, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import {
  ElForm,
  ElFormItem,
  ElRow,
  ElCol,
  ElImage,
  ElDivider,
  ElMessage,
} from "element-plus";
import {
  assetsTypeOptionsArr,
  assetsGetTypeOptionsArr,
  assetsStateOptionsArr,
} from "@/common/dict/dictCollect";
import { downloadFile } from "@/common/utils/GlobalUtils";
import { assetsApi, fileControlApi } from "@/api/assets";

const route = useRoute();
const router = useRouter();
const store = useStore();
// 从路由path中获取id
const assetsId = router.currentRoute.value.params.assetId;
// 登录用户部门信息
const getUserDepartment = computed(() => store.state.user.departmentName);

const baseForm = reactive({
  assetsName: "",
  regionCode: "",
  streetCode: "",
  status: "",
  assetsOwner: "",
  type: "",
  typeName: "",
  sourceType: "",
  sourceTypeName: "",
  sourceTime: "",
  manageTime: "",
  buildArea: "",
  parkingArea: "",
  selfUseArea: "",
  handoverArea: "",
  leaseAbleArea: "",
  usableArea: "",
  longitude: "",
  latitude: "",
  address: "",
  propertyCompanyName: "",
  propertyCompanyId: "",
  assetsWorth: "",
  leaseRate: "",
  leaseUnusedArea: "",
  leasedArea: "",
  createTime: "",
  files: [],
});

const state = reactive({
  imgArr: [],
  docFileArr: [],
  picSrcListArr: [], // 预览数组
});

const typeChange = (name, val) => {
  // 资产类型
  if (name == "type") {
    assetsTypeOptionsArr.map((n) => {
      if (n.value == val) {
        baseForm.typeName = n.label;
      }
    });
  }
  // 取得方式
  if (name == "sourceType") {
    assetsGetTypeOptionsArr.map((n) => {
      if (n.value == val) {
        baseForm.sourceTypeName = n.label;
      }
    });
  }
};

const initInfo = () => {
  assetsApi.getAssetsDetail(assetsId).then((res) => {
    const { code, data, msg } = res;
    if (code == 200) {
      Object.keys(baseForm).forEach((key) => {
        baseForm[key] = data[key];
        if (
          key !== "files" &&
          data[key] !== 0 &&
          (data[key] == null || data[key] == "")
        ) {
          baseForm[key] = "--";
        }
      });
      if (baseForm.type !== "--") typeChange("type", baseForm.type);
      if (baseForm.sourceType !== "--") typeChange("sourceType", baseForm.type);

      if (baseForm.files?.length) {
        // 图片、文件 的过滤
        baseForm.files.map((n, i) => {
          if (n.fileType == 1) {
            state.imgArr.push(n);
          } else {
            state.docFileArr.push(n);
          }
        });
        state.imgArr.map((n, i) => {
          state.picSrcListArr.push(n.fileAddress);
        });
      }
    }
  });
};
const switchImg = (url) => {
  state.picSrcListArr = state.picSrcListArr.filter((item) => item != url);
  state.picSrcListArr.unshift(url);
};

onMounted(() => {
  initInfo();
});
</script>

<style lang="scss" scoped>
.assetArchiveDetailsPage {
  .inpuBox {
    padding: 32px 76px 15px;
    border-radius: 10px;
    border: 1px solid #e3e7f1;
    margin-bottom: 38px;
    .demo-form-inline {
      .docBox {
        .downLoadBtn {
          width: 77px;
          height: 32px;
          line-height: 30px;
          display: inline-block;
          background: linear-gradient(180deg, #ffd091 0%, #ffa557 100%);
          border-radius: 4px;
          text-align: center;
          font-weight: 500;
          color: #ffffff;
          font-family: SourceHanSansMedium;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.assetArchiveDetailsPage {
  .inpuBox {
    .demo-form-inline {
      .el-form-item {
        margin-bottom: 34px;
        .el-form-item__label {
          font-weight: 500;
          font-size: 16px;
          font-family: SourceHanSansMedium;
        }
        .el-form-item__content {
          padding-left: 20px;
          border-radius: 3px;
          background: #f7f7fa;
        }
      }
      .noBgBox {
        .el-form-item__content {
          background: none;
        }
      }
      .docBox {
        // .el-form-item__content {
        //   margin-top: 50px;
        // }
      }
    }
  }
}
</style>
